<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>国际化信息列表</title>
<link rel="stylesheet" href="<%=basePath %>/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=basePath %>/plugins/bootstraptable/bootstrap-table.css">
    <link rel="stylesheet" href="<%=basePath %>/bootstrap/css/custom-theme/jquery-ui-1.9.2.custom.css">
    <link rel="stylesheet" href="<%=basePath%>/bootstrap/css/bootstrap-multiselect.css">
    <link rel="stylesheet" href="<%=basePath %>/plugins/bootstraptable/bootstrap-table-edittable.css">
    
    <script src="<%=basePath %>/js/jquery.min.js"></script>
	<script src="<%=basePath %>/bootstrap/js/bootstrap.min.js"></script>
	<script src="<%=basePath %>/bootstrap/js/bootstrapQ.js"></script>
	<script src="<%=basePath %>/plugins/bootstraptable/bootstrap-table.js"></script>
	
	<script src="<%=basePath %>/plugins/bootstraptable/locale/bootstrap-table-zh-CN.js"></script>
	<script src="<%=basePath %>/plugins/bootstraptable/extensions/editable/bootstrap-table-editable.js"></script>
	
	<script src="<%=basePath %>/plugins/bootstrapValidator/js/bootstrapValidator.min.js"></script>
	<script src="<%=basePath %>/plugins/bootstrapValidator/js/language/zh_CN.js"></script>
	<script src="<%=basePath%>/bootstrap/js/bootstrap-multiselect.js"></script>
	<script src="<%=basePath %>/js/util.js"></script>
    <script src="<%=basePath %>/plugins/layer/layer.js"></script>
	<link rel="stylesheet" href="<%=basePath%>/css/toastr.min.css">
	<script src="<%=basePath%>/js/toastr.min.js"></script>
	<script src="<%=basePath%>/js/toastrinit.js"></script>
	<script src="<%=basePath %>/js/front_util.js"></script>
	 <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

<style> 
.table-hover>tbody>tr:hover{background-color:#C6E2FF}

.editable-click, 
a.editable-click, 
a.editable-click:hover {
    text-decoration: none;
    border-bottom:  #0088cc;
}	
a {
    color: #333333;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
	/* 加载父页面的通用CSS，fun来自font-util.js*/
	addCSSToChildPage();	
	//控件初始化
	$.ajax({
        url:"<%=basePath%>/dict/getMultiselect.do",
        type:"POST",
        dataType:"json",
        data:{dictionaryCode:"T_MESSAGE_RESOURCE_LANGUAGE"},
        success:function(data){
            $("#language").empty();
            $("#language").multiselect({
                enableFiltering: false,
                 maxHeight: 300
            });
            $("#language").multiselect('dataprovider',eval(data.jsonData));//数据初始化。如果有数据默认值，则需要参考最上面的代码
            $("#language").multiselect('select',data.defaultVal); //默认选择值
            $("#language").multiselect('refresh'); //配合默认选择值进行刷新

        }    
	 });
    //控件初始化完毕
	//在表中显示数据
    var url = '<%=basePath %>/i18n/pageMessageResource.do';
    $("#table").bootstrapTable({
    		/*数据参数清单*/
            method:'post',//请求方式
            url:url,//请求url
            dataType:'json',
            queryParams:queryParams,//传递参数
            contentType:'application/x-www-form-urlencoded',//请求数据内容格式
            /*样式参数清单*/ 
            //分页参数
            pagination:true,//是否分页
        	pageList: [10, 25, 50, 100],
			pageSize:10,
			pageNumber:1,
			sidePagination:'server',
            showRefresh: true,//是否显示刷新按钮
            striped:true,//行间隔色
            locale:"${language}" ,
            toolbar:"#toolbar",
            clickToSelect:true,
            onClickRow: function (row,$element) {
           	   $element.addClass('info').siblings().removeClass('info').end();
           	},
           	editable:true,//开启编辑模式  
        	idField: "resourceId",
            columns: [ {
            	radio: true
             },{
            	title:"<spring:message code='i18n.name'/>",
                field: "name",
                editable: {
                    type: 'textarea',
                    rows: 1,
                    mode: 'inline',
                    validate: function (v) {
                        if (!v) return 'not null';

                    }
                }
            }, {
            	title:"<spring:message code='i18n.text'/>",
                field: "text",
                editable: {
                	type: 'textarea',
                    rows: 1,
                    mode: 'inline',
                    validate: function (v) {
                        if (!v) return 'not null';

                    }
                }
            },{
            	title:"<spring:message code='i18n.language'/>",
                field: "language",
                editable: {
                	type: 'select',
                    mode: 'inline',
                    validate: function (v) {
                        if (!v) return 'not null';

                    },
                    source:[{value: "zh_CN", text: "zh_CN"}, {value: "en_US", text: "en_US"}]
            
                }
            } , {
                field: "operation",
                title: "<spring:message code='base.delete'/>",
                formatter:operateFormatter,
                events:{
               	 'click a.delete_true': function (e, value, row, index) {
	         			bootstrapQ.confirm({
	            			title:"<spring:message code='base.alert.title'/>",
	            			msg:"<spring:message code='i18n.delete.msg'/>"   
	            		},function(){
	            			$.ajax({
	            	    		type:"POST",
	            				dataType:"json",
	            	            url:"<%=basePath%>/i18n/delete.do",
	            	            data:{
	            	            	resourceId:row.resourceId 
	            	            },
	            	            success:function(data){
	            	            	if(data.msg == 'success'){
	            	            		toastr.success("<spring:message code='base.success'/>"); 
	            	            	    $("#table").bootstrapTable('refresh');
	            	           		 }
	            	            },error:function(data){
	            	            	toastr.error("<spring:message code='base.error'/>"); 
	            	            }
	            	    	 });
	             		});
         	 		}
              	}
			}
            ],
            onEditableSave: function (field, row, oldValue, $el) {
                $.ajax({
                    type: "post",
                    url: "<%=basePath %>/i18n/update.do",
                    data: row,
                    dataType: 'JSON',
                    success: function (data) {
                        if (data.msg == "success") {
                        	toastr.success("<spring:message code='base.success'/>"); 
                        }
                    },
                    error: function () {
                    	toastr.error("<spring:message code='base.error'/>"); 
                    },
                    complete: function () {

                    }

                });
            }
       });
    //在初始化和查询要传递的参数
    function queryParams(params){	
        return {
        	name : $("#name").val() ,
        	text : $("#text").val() ,
        	language :$("#language").val() ,
        	limit : params.limit ,
			offset : params.offset
        };
    };
    
   
    //查询按钮的点击事件
    $("#btn_query").click(function(){
        $("#table").bootstrapTable('refresh');
    });

    //添加
    $("#btn_add").click(function(){
    	var name =  $("#name").val();
    	var text =  $("#text").val();
    	var language = $("#language").val();
    	if(name=="" || text=="" || language ==""){
    		toastr.error("<spring:message code='i18n.add.errormsg'/>");
    	
    		return false;
    	}
    	
    	$.ajax({
	    		type:"POST",
				dataType:"json",
	            url:"<%=basePath%>/i18n/save.do",
	            data:{
	            	name: name,
	            	text:text,
	            	language:language,
	            	
	            },
	            success:function(data){
	            	if(data.msg == 'success'){
	            		toastr.success("<spring:message code='base.success'/>"); 
	            	    $("#table").bootstrapTable('refresh');
	           		 }
	            },error:function(data){
	            	toastr.error("<spring:message code='base.error'/>"); 
	            }
	    	 });
    	
    });
   
});//document结束

function orderFormatter(value,row,index){
	return index+1;
}

function operateFormatter(value, row, index) {
	return [

    	'<a class="delete_true ml10" href="javascript:void(0)" title="<spring:message code='base.delete'/>">',
        	'<span class="glyphicon glyphicon-exclamation-sign text-danger"  style="font-size:15px;"></span>',
        '</a>',
	].join('');
}

</script>

</head>
<body >
<div>
    <div style="float:left;width:98%; margin-left:1%">
            <div id="toolbar">
                    <div class="form-inline" >
                    <form id="queryForm">
                        <div class="form-group">
                            <div  style="vertical-align:top ">
                                <input  type="text" id="name"  class="" placeholder="<spring:message code='i18n.name'/>" > 
                                <input  type="text" id="text"  class="" placeholder="<spring:message code='i18n.text'/>" > 	
                                <select id="language" name="language" class="form-control"></select>
                            </div>
                        </div>
                        <button id="btn_query" 	type="button" class="btn btn-primary"><spring:message code='base.search'/></button>
                        <button id="btn_add" 	type="button" class="btn btn-primary"><spring:message code='base.add'/></button>
					</form>
                    </div>
            </div>
            <table   id="table" class="table table-hover" >		  		    
               <!--  <thead>
                    <tr> 
                    	<th data-radio="true">i</th>
                        <th data-field="" data-formatter="orderFormatter">序号</th>
                        <th data-field="name">编码值</th>
                        <th data-field="text"  >显示名</th> 
                        <th data-field="language"  >语言</th> 
                        <th data-field="operation" data-formatter="operateFormatter" data-events="operateEvents">操作</th>
                    </tr>
                </thead>  
                 -->           
            </table>
    	</div> 
	</div> 
</body>
</html>